<template>
  <div id="all">
    <el-container>
<el-aside width="210px">
  <div>
    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      
      >

      <div class="Mertitle">商家中心</div>

      <div v-for="item in meamData"  :key="item.name">
        <div v-if="!item.children">
            <el-menu-item @click="clickmemu(item)" :key="item.name" :index="item.name" >
        <!-- <i class="el-icon-setting"></i> -->
            <span slot="title">{{item.label}}</span>
            </el-menu-item> 
        </div>
        
        <div v-if="item.children">
        <el-submenu :index="item.name">
        <template slot="title">
         
          <span>{{item.label}}</span>
            </template>
            <el-menu-item-group>
            <el-menu-item @click="clickmemu(ch)" v-for="ch in item.children" :index="ch.name"  :key="ch.name">{{ch.label}}</el-menu-item>
            
            </el-menu-item-group>
        
      </el-submenu>
        </div>

      </div>

      


    </el-menu>

</div>
</el-aside>
<el-container>
  <el-header>
    <el-header>{{$route.meta.title}}</el-header>
  </el-header>
  <el-main>
    <router-view/>
  </el-main>
</el-container>
</el-container>
  </div>
</template>

<script>



export default {
  name: 'Rooms',
  components: {
  },
  data() {
    return {
      meamData:[
                {
                    path:"merInfor",
                    name:"merInfor",
                    label:"商家信息",
                    url: "/merInfor",
                },
                {
                    path:"merorder",
                    name:"merorder",
                    label:"订单列表",
                    url: "/merInfor",
                },
                {
                    path:"/mergood",
                    name:"/mergood",
                    label:"商品管理",
                    url: "/mergood",
                    children:[
                        {
                            path:"/merchants/mergoods",
                            name:"/mergoods",
                            label:"商品列表",
                            url: "/merchants/mergoods",
                        },
                        {
                            path:"/merchants/goodstype",
                            name:"/goodstype",
                            label:"商品分类",
                            url: "/merchants/goodstype",
                        },
                        
                      ]
                },

            ],
            defaultActive:"/merInfor"
    }
  },
  created(){
      
  },
  methods:{
    clickmemu(item){
        // console.log(item)
        this.$router.push(item.path)
        
    //    bus.$emit("routerTitle", item.label)
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
    
  }



}
</script>
  <style lang="scss" scoped>
  .Mertitle{
    height: 50px;
    font-size: 20px;
    align-items: center;
    text-align: center;
    line-height: 50px;
  }
      .el-header {
  background-color: #FFFFFF;
  color: #333;
  line-height: 60px;
  height: 100%;
  text-align: left;
  font-size: 19px;
}

.el-aside {
  background-color: rgb(243,243,243);
  color: #333;
  height: 100vh;
}
/deep/ .el-menu{
    background-color: rgb(243,243,243);
}

.el-main {
  background-color: #FFFFFF;
  color: #333;
}

  </style>
  